<template>
    <div class="productManage">
        <x-header v-show="!isWeChar" style="z-index: 110;">
            <div slot="default" class="common__header--title">分享二维码</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <ul>
            <li @click="getShareQrcode('shop','')" class="list-group-item shop-qrcode-index">
                <img class="qrcode-shop-index" src="~assets/x3/shop/shop-ui.png">
                <div class="product-name-qrcode-index">
                    <span class="product-name-title">
                        <nobr>我的店铺</nobr>
                    </span>
                    <!-- <span :class="productTypeClass" :style="getProType(element.riskCode)">{{element.riskName}}</span> -->
                </div>
                <!-- <span :class="productTypeClass" :style="getProType(element.riskCode)">{{element.riskName}}</span> -->
                <!-- <div v-show="isShowRate" class="product-info-info">推广费{{element.rate|rate}}%</div> -->
                <img class="product-img" src="~assets/x3/ico/shop_list_qrcode.png">
            </li>

        </ul>
        <div style="z-index: 110;" class="common__title">
            <scroller :lock-x="false" lock-y>
                <div class="common__title_btn">
                    <checker v-model="insureType" radio-required default-item-class="common__item" selected-item-class="common__item-selected common__bacolor--DefaultTheme">
                        <checker-item class="grid-center" :value="item.key" v-for="(item, index) in baseRiskCodeList" :key="index">{{item.value}}</checker-item>
                    </checker>
                </div>
            </scroller>
        </div>
        <!-- <transition name="fadedis">
        </transition> -->
        <div>
            <div style="border-top:1px solid #CDCDCD">
                <ul>
                    <li class="list-group-item" :style="setBorder(index)" v-for="(element,index) in addPro" :key="element.order" @click="getShareQrcode(element.productId,element.productCname)">
                        <div class="product-name-qrcode">
                            <span class="product-name-title">
                                <nobr>{{element.productCname}}</nobr>
                            </span>
                            <!-- <span :class="productTypeClass" :style="getProType(element.riskCode)">{{element.riskName}}</span> -->
                        </div>
                        <span :class="productTypeClass" :style="getProType(element.riskCode)">{{element.riskName}}</span>
                        <!-- <div v-show="isShowRate" class="product-info-info">推广费{{element.rate|rate}}%</div> -->
                        <img class="product-img" src="~assets/x3/ico/shop_list_qrcode.png">
                    </li>

                </ul>
            </div>
        </div>
        <!-- <div class="product-scroll"></div> -->
        <x-dialog v-model="isShowShare" class="share-Einv" hide-on-blur>
            <div class="share-div">
                长按保存或转发二维码
                <!-- <img class="qrcode-shop-index" src="~assets/x3/shop/shop-ui.png"> -->
                <!-- <check-icon :value.sync="isGetHeader" type="plain">我要头像</check-icon> -->
                <img style="width: 90%;" :src="shop.curQrcode">
                <check-icon :value.sync="isGetHeader">我要头像</check-icon>
                <!-- </div> -->
            </div>
        </x-dialog>

        <div class="btn-manage"></div>
        <!-- <div @click="setEdit()" class="shop-edit_save">{{editType}}</div> -->
        <!-- <div class="list-group col-md-3">
                                                                                                                                                                                                                                                                                                                                                    <pre>{{listString}}</pre>
                                                                                                                                                                                                                                                                                                                                                </div> -->

    </div>
</template>

<script>
// import SharePage from "src/js/sharePage"; //引入微信分享js
import { FooterIndex, Mutations, RouteUrl, WeChatShare, Url_Key } from "src/common/const";
import draggable from 'vuedraggable';
import { mapState, mapActions } from "vuex";
import { XHeader, CheckerItem, Group, Scroller, Checker, Cell, XButton, Panel, GroupTitle, XDialog, CheckIcon } from "vux";
import { RequestUrl } from 'src/common/url';
export default {
    components: {
        XDialog,
        Group,
        XHeader,
        Cell,
        Scroller,
        Checker,
        CheckerItem,
        draggable,
        CheckIcon
    },
    data() {
        return {
            productNameClass: "product-name",
            productTypeClass: "product-type",
            productInfoSetClass: "product-info-set",
            baseRiskCodeList: [
                {
                    key: "all",
                    value: "全部"
                }
            ],
            insureType: "all",
            list: [{ productCname: "安居乐", productId: "88", rate: "3105", riskCode: "3105", order: 1, rate: "0.1" }, { productCname: "安居", productId: "88", rate: "3105", riskCode: "3105", order: 2, rate: "0.1" }, { productCname: "安居", productId: "88", rate: "3105", riskCode: "3105", order: 3, rate: "0.1" }],
            editable: true,  //设置为false不能改变位置
            editType: "编辑",
            address: "",
            addPro: [],
            saveAddPro: [],
            npPro: [],
            isQuery: true,
            isShowShare: false,
            isGetHeader: false,
            index: "",
            name: "",
        };
    },
    watch: {
        isGetHeader(cur, old) {
            this.getShareQrcode(this.index, this.name);
        },
        isInitData(cur, old) {
            if (cur) {
                this.init();
                this.queryDaya("get");
            }
        },
        insureType(cur, old) {
            this.queryDaya("get");
        },
    },
    filters: {
    },
    methods: {
        getShareQrcode(index, name) {
            this.index = index;
            this.name = name;
            this.isShowShare = true;
            let parmList = [];
            let uuid = this.$encode.hex_md5(this.user.userDto.userCode + ":1");
            let urlParm = {
                key: Url_Key.SHARE_UUID,
                value: uuid
            }
            parmList.push(urlParm);
            let shareUrl = "";
            if (index == "shop") {
                name = this.user.userDto.shopName;
                shareUrl = RequestUrl.BASE_URL + RouteUrl.SHOP_INDEX + this.$common.setShareUrl(parmList);
            } else {
                let urlPro = {
                    key: Url_Key.PRODUCT_ID,
                    value: index
                }
                parmList.push(urlPro);
                shareUrl = RequestUrl.BASE_URL + RouteUrl.DETAILS + this.$common.setShareUrl(parmList);
            }
            let imgUrl = "";
            if (this.isGetHeader) {
                if (this.$common.isNotEmpty(this.user.userDto.headUrl)) {
                    imgUrl = this.user.userDto.headUrl;
                }
                if (imgUrl.indexOf("http:") < 0 && imgUrl.indexOf("https:") < 0) {
                    //补全产品的图片路径
                    imgUrl = RequestUrl.WEB_PATH + imgUrl;
                }
                if (imgUrl == "") {
                    imgUrl = RequestUrl.WEB_PATH + "sticcxb/upload/assets/x3/logo.jpg"
                }
            }
            if (this.$common.isEmpty(name)) {
                name = "恒华出行宝";
            }
            let data = {
                _this: this,
                query: {
                    TYPE: "FORM",
                    shareUrl: shareUrl,
                    userHeadUrl: imgUrl,
                    productCName: name,
                    isGetHeader: this.isGetHeader,
                    fontSize: 30,
                    fileType: "jpg",
                }
            };
            this.$common.storeCommit(this, Mutations.GET_QRCODE, data);
        },
        init() {
            for (let i = 0; i < this.riskCodeList.length; i++) {
                this.isReadRisk = true;
                this.baseRiskCodeList.push(this.riskCodeList[i]);
            }
            let _this = this;
        },
        setBorder(index) {
            if (index != 0) {
                return "border-top: 1px solid #F0F0F0;";
            }
        },
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.SHOP_MANAGE);
        },
        getProType(code) {
            if (typeof code != "undefined") {
                let riskCodeStyle = "border-color:" + this.$store.state.colorRiskTyle[code].color + ";color:" + this.$store.state.colorRiskTyle[code].color;
                return riskCodeStyle;
            } else {
                return "";
            }
        },
        queryDaya(operation) {
            // debugger
            if (typeof (this.saveAddPro[this.insureType]) == "undefined") {
                let branchCode = "";
                if (this.$common.isNotEmpty(this.user.userDto.agrementNo)) {
                    branchCode = this.user.userDto.branchCode;
                } else {
                    branchCode = this.user.userDto.areaCode;
                }

                if (this.$common.isEmpty(branchCode)) {
                    branchCode = this.hotArea.areaCode;
                }

                let data = {
                    _this: this,
                    userCode: this.user.userDto.userCode,
                    branchCode: branchCode,
                    operation: operation,
                    type: this.insureType,
                    page: 'qrcode'
                }
                this.$common.storeCommit(this, Mutations.PRODUCT_MANAGE, data);
            } else {
                this.addPro = this.saveAddPro[this.insureType];
            }
        },
        // saveData(type) {
        //     let data = {
        //         _this: this,
        //         type: type
        //     }
        //     this.$common.storeCommit(this, Mutations.PRODUCT_MANAGE_SAVE, data);
        // }
    },
    computed: {
        dragOptions() {
            return {
                animation: 0,
                group: 'description',
                disabled: !this.editable,
                ghostClass: 'ghost'
            };
        },
        listString() {
            return JSON.stringify(this.list, null, 2);
        },
        user() {
            return this.$store.state.user;
        },
        hotArea() {
            return this.$store.state.saveInsure.hotArea;
        },
        riskCodeList() {
            return this.$store.state.riskCodeList;
        },
        isWeChar() {
            return this.$store.state.isWeChar;
        },
        shareUuid() {
            return this.$store.state.shareUuid;
        },
        isInitData() {
            return this.$store.state.isInitData;
        },
        shop() {
            return this.$store.state.shop;
        },
        isShowRate() {
            return this.$store.state.isShowRate;
        }
    },
    beforeMount() {
        // let test = this.user;

        // if (sessionStorage["INSURE_FORM_URL"] == "/") {
        //     this.$common.goUrl(this, RouteUrl.DETAILS);
        // }
    },
    beforeDestroy() {
        // this.saveData(this.insureType);
    },
    mounted() {
        // sessionStorage["DETAILS_FORM_URL"] = RouteUrl.PRODUCT_MANAGE;
        document.title = "分享二维码";
        if (this.isInitData) {
            this.queryDaya("get");
            this.init();
        }
        // if (this.user.isLogin) {
        // } else {
        //     this.$common.showMsg(this, "未登录,无法访问", "red;",true);
        //     this.$common.goUrl(this, RouteUrl.MY);
        // }
        this.$init.subPageInit(this);
        // setTimeout(() => {
        //     $(".product-scroll").css("height", window.screen.height);
        // }, 10);

        // this.setBaseClass();
        // if (this.user.isLogin) {
        //     if (this.user.userDto.userType == "2" || this.user.userDto.userType == "5") {
        //         this.isShowRate = true;
        //     }
        // }
    },
}
</script>

<style lang="scss" scoped>
.flip-list-move {
  transition: transform 0.5s;
}

.btn-manage {
  width: 100%;
  height: 30px;
}
// .product-scroll {
//   width: 100px;
//   height: 100%;
//   background-color: rgba(242, 138, 138, 0);
//   //   background-color: red;
//   display: block;
//   position: absolute;
//   float: right;
//   z-index: 100;
//   top: 0;
// }
.no-move {
  transition: transform 0s;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.list-group {
  min-height: 20px;
}

.list-group-item {
  height: 35px;
  line-height: 35px;
  cursor: move;
  background: #fff; // padding: 5px 10px;
  div {
    display: -webkit-inline-box;
  } // padding-top:10px;
  // padding-bottom: 10px;
  padding: 5px 0px;
}

.list-group-item i {
  cursor: pointer;
}
.product-name-qrcode {
  font-size: 14px;
  width: 60%;
  padding-left: 6%;
}
.product-name-qrcode-index {
  font-size: 14px;
  width: 60%;
  padding-left: 3%;
}

// .product-name {
//   font-size: 14px;
//   width: 71%;
//   padding-left: 2%;
// }
.product-type {
  font-size: 13px; // display: -webkit-inline-box;
  border: 1.5px solid;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 4px;
}
.product-type-rate {
  font-size: 13px; // display: -webkit-inline-box;
  border: 1.5px solid;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 4px;
}
.product-name-rate {
  font-size: 14px;
  width: 50%;
  padding-left: 2%;
}
.product-info-set-rate {
  width: 10%;
  font-size: 13px;
  color: #C8161D;
}
// 64 - 17 =37
.product-info-set {
  width: 10%;
  font-size: 13px;
  color: #C8161D;
}

.product-info-info {
  width: 22%;
  font-size: 13px;
  color: #C8161D;
}

.product-name-title {
  font-weight: bold;
}

.qrcode-shop-index {
  display: block;
  float: left;
  width: 30px;
  margin-top: 4px;
  margin-left: 5%;
}

.product-img {
  display: block;
  float: right;
  width: 22px;
  margin-top: 7px;
  margin-right: 3%;
}

.shop-edit_save {
  display: -webkit-inline-box;
  padding: 15px;
  border-radius: 30px;
  background: #C8161D;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  position: fixed;
  right: 5%;
  bottom: 3%;
}
.shop-qrcode-index {
  background: #dfecfc;
}

.product-alert-qrcode {
  text-align: center;
  font-size: 13px;
  color: #dfecfc;
  background: #dfecfc;
  padding: 8px 0px;
}
</style>
